
export const optionLine = {
  chart: {
    zoomType: 'xy',
    type: 'area',
    backgroundColor: null,
    margin: [50, 60, 50, 90]
  },
  credits: {
    enabled: false
  },
  title: {
    text: null
  },
  xAxis: [{
    gridLineColor: '#3C6A94',
    gridLineWidth: 2,
    labels: {
      style: {
        color: '#ccc',
        fontSize: '22px'
      }
    },
    categories: ['02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月'],
    crosshair: true
  }],
  yAxis: [{ // Primary yAxis
    min: 0,
    title: {
      text: '面积',
      align: 'high',
      rotation: 0,
      y: -30,
      x: 120,
      style: {
        fontSize: '22px',
        color: '#fff'
      }
    },
    gridLineColor: '#3C6A94',
    tickAmount: 4,
    labels: {
      style: {
        color: '#ccc',
        fontSize: '24px'
      }
    }
  }, { // Secondary yAxis
    min: 0,
    title: {
      text: '数量',
      align: 'high',
      rotation: 0,
      y: -30,
      x: -120,
      style: {
        fontSize: '22px',
        color: '#fff'
      }
    },
    gridLineColor: '#3C6A94',
    tickAmount: 4,
    labels: {
      style: {
        color: '#ccc',
        fontSize: '22px'
      }
    },

    opposite: true
  }],
  tooltip: {
    formatter() {
      return `
        <b>${this.x}</b><br/>
        ${this.series.name}：${this.y}<br/>
      `
    },
    backgroundColor: 'rgba(0,0,0,0.5)',
    style: {
      padding: 10,
      fontWeight: 'bold',
      fontSize: 24,
      color: '#fff'
    }
  },
  legend: {
    verticalAlign: 'top',
    y: -20,
    itemStyle: {
      color: ' #CBEAFF',
      fontSize: 23
    },
    itemHoverStyle: {
      color: '#fff'
    }
  },
  series: [{
    name: '单位数',
    type: 'area',
    yAxis: 1,
    data: [20, 30, 60, 40, 10, 45, 30, 30, 60, 40],
    tooltip: {
      valueSuffix: ' mm'
    },
    fillColor: {
      linearGradient: [0, 0, 0, 100],
      stops: [
        [0, 'rgba(0,216,255,.6)'],
        [1, 'rgba(55, 162, 218, 0.1)']
      ]
    }
  }, {
    name: '伤亡情况',
    type: 'area',
    data: [10560, 51360, 10360, 21360, 51360, 21360, 11360, 41360, 71360, 11360],
    tooltip: {
      valueSuffix: '°C'
    },
    fillColor: {
      linearGradient: [0, 0, 0, 100],
      stops: [
        [0, '#FAD900'],
        [1, 'rgba(55, 162, 218, 0.1)']
      ]
    }
  }]
}

export const optionLine1 = {
  title: {
    show: false
  },
  grid: {
    right: 0,
    bottom: 35,
    top: 55,
    left: 65,
    style: {
      fill: 'rgba(0, 0, 0, 0)'
    }
  },
  // legend: {
  //   data: ['', '税收'],
  //   top: 25,
  //   right: 10,
  //   textStyle: {
  //     fontFamily: 'Arial',
  //     fontSize: 28,
  //     fill: '#fff'
  //   }
  // },
  xAxis: {
    name: '',
    splitLine: {
      show: true,
      style: {
        stroke: '#3C6A94',
        lineWidth: 1
      }
    },
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLine: {
      style: {
        stroke: '#fff',
        lineWidth: 1
      }
    },
    axisTick: {
      style: {
        stroke: '#fff',
        lineWidth: 1
      }
    },
    axisLabel: {
      style: {
        fill: '#fff',
        fontSize: 28,
        rotate: 0
      }
    }
  },
  yAxis: {
    name: '数量 / 面积',
    data: 'value',
    nameGap: 30,
    min: 0,
    splitNumber: 4,
    splitLine: {
      // show: false
      style: {
        stroke: '#3C6A94',
        lineWidth: 1
      }
    },
    nameTextStyle: {
      fill: '#fff',
      fontSize: 24
    },
    axisLine: {
      style: {
        stroke: '#fff',
        lineWidth: 1
      }
    },
    axisTick: {
      style: {
        stroke: '#fff',
        lineWidth: 1
      }
    },
    axisLabel: {
      style: {
        fill: '#fff',
        fontSize: 28,
        rotate: 0
      }
    }
  },
  series: [
    {
      name: '企业税收趋势',
      data: [20, 30, 60, 40, 10, 45, 30, 30, 60, 40, 10, 45],
      type: 'line',
      fill: {
        show: true
      },
      lineArea: {
        show: true,
        gradient: ['rgba(0,216,255,1)', 'rgba(55, 162, 218, 0)']
      },
      linePoint: {
        radius: 4,
        style: {
          shadowBlur: 8,
          shadowColor: '#39F18A',
          lineWidth: 5
        }
      }
    }
  ]
}

export const optionLine2 = {
  chart: {
    zoomType: 'xy',
    type: 'area',
    backgroundColor: null,
    margin: [50, 60, 50, 90]
  },
  credits: {
    enabled: false
  },
  title: {
    text: null
  },
  xAxis: [{
    gridLineColor: '#3C6A94',
    gridLineWidth: 2,
    labels: {
      style: {
        color: '#ccc',
        fontSize: '22px'
      }
    },
    categories: ['02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月'],
    crosshair: true
  }],
  yAxis: [{ // Primary yAxis
    min: 0,
    title: {
      text: '面积',
      align: 'high',
      rotation: 0,
      y: -30,
      x: 120,
      style: {
        fontSize: '22px',
        color: '#fff'
      }
    },
    gridLineColor: '#3C6A94',
    tickAmount: 4,
    labels: {
      style: {
        color: '#ccc',
        fontSize: '24px'
      }
    }
  }, { // Secondary yAxis
    min: 0,
    title: {
      text: '数量',
      align: 'high',
      rotation: 0,
      y: -30,
      x: -120,
      style: {
        fontSize: '22px',
        color: '#fff'
      }
    },
    gridLineColor: '#3C6A94',
    tickAmount: 4,
    labels: {
      style: {
        color: '#ccc',
        fontSize: '22px'
      }
    },

    opposite: true
  }],
  tooltip: {
    formatter() {
      return `
        <b>${this.x}</b><br/>
        ${this.series.name}：${this.y}<br/>
      `
    },
    backgroundColor: 'rgba(0,0,0,0.5)',
    style: {
      padding: 10,
      fontWeight: 'bold',
      fontSize: 24,
      color: '#fff'
    }
  },
  legend: {
    verticalAlign: 'top',
    y: -20,
    itemStyle: {
      color: ' #CBEAFF',
      fontSize: 23
    },
    itemHoverStyle: {
      color: '#fff'
    }
  },
  series: [{
    name: '单位数',
    type: 'area',
    yAxis: 1,
    data: [20, 30, 60, 40, 10, 45, 30, 30, 60, 40],
    tooltip: {
      valueSuffix: ' mm'
    },
    fillColor: {
      linearGradient: [0, 0, 0, 100],
      stops: [
        [0, 'rgba(0,216,255,.6)'],
        [1, 'rgba(55, 162, 218, 0.1)']
      ]
    }
  }, {
    name: '受灾趋势',
    type: 'area',
    data: [10560, 51360, 10360, 21360, 51360, 21360, 11360, 41360, 71360, 11360],
    tooltip: {
      valueSuffix: '°C'
    },
    fillColor: {
      linearGradient: [0, 0, 0, 100],
      stops: [
        [0, '#FAD900'],
        [1, 'rgba(55, 162, 218, 0.1)']
      ]
    }
  }]
}
